<template>
	<div class="item flex" v-for="item in list" :key="item.albumId || item.id">
		<img v-lazy="item.imgPath ? item.imgPath : item.albumCoverPath[0] === 'h' ? item.albumCoverPath : BASE_URL + item.albumCoverPath">
		<div class="item_right flex">
			<span :class="lineNum === 2 ? 'moreV' : 'oneLine'">{{ item.title || item.albumTitle || item.keyword }}</span>
			<div class="item_right_btm flex">
				<slot>
					<div class="news"><span class="iconfont icon-yonghukaihu"></span>{{ item.anchorName ||
						item.albumUserNickName}}</div>
					<div><span class="iconfont icon-erji"></span>{{ item.playCount ? filterNum(item.playCount)
						: filterNum(item.albumPlayCount) }}</div>
				</slot>
			</div>
		</div>

	</div>
</template>

<script lang="ts" setup>
import "@/static/icon/home2/iconfont.css";
import filterNum from "@/tools/filterNum";

const BASE_URL = import.meta.env.VITE_IMG_BASE_URL;


defineProps({
	txt: {
		type: String,
		default: "",
	},
	list: {
		type: Array<{ [porp: string]: any }>,
		required: true,
		default: []
	},
	lineNum: {
		type: Number,
		default: 2
	}
})
</script>

<script lang="ts">
export default {
	name: "WCard",
};
</script>

<style scoped lang="less">
.flex {
	display: flex;
}

.bx {
	box-sizing: border-box;
}

.big_font {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

// 多行文本移出隐藏
.moreV {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*设置对齐模式*/
	-webkit-line-clamp: 2;
	/*设置多行的行数，示例为2行*/
}

.oneLine {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



.item {
	width: 100%;
	margin-bottom: 20px;

	img {
		width: 70px;
		height: 70px;
		margin-right: 15px;
	}

	.item_right {
		font-size: 14px;
		flex-direction: column;
		justify-content: space-around;

		.item_right_btm {
			font-size: 12px;

			.news {
				margin-right: 10px;
			}
		}
	}
}
</style>